<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!--
        我们在使用原生html标签的时候，可以通过属性来控制元素的一些渲染行为
        自定义组件的使用方式与原生html标签一样，也可以通过属性来控制其内部行为

        有一点要注意：
            在vue的整体设计中，数据始终是单向流动的，也就是说数据从父组件传递给子组件，子组件不能修改父组件传递进行的数据。
            如果有业务场景需要的话一般会通过事件将修改动作回调到父组件执行。
    -->
    <div id="app">
        <!-- 使用自定义组件my-alert时传了一个title属性 -->
        <my-alert title="按钮1"></my-alert>
        <my-alert title="按钮2"></my-alert>
    </div>
</body>

<script>
    const {createApp,ref} = Vue
    const alertComponent = {
        // 声明外部属性（接收外部使用组件时传入的属性）
        props:['title'],
        setup(props) {
            const msg = "警告框提示"
            const count = ref(1)
            const click = () => {
                /*
                    在setup()内部也可以访问外属性
                    要求在setup函数上把props作为参数传入进来！！！
                */
                alert(props.title + msg + count.value++)
            }

            return {msg,count,click}
        },
        template: `<div><button @click="click">{{title}}</button></div>`
    }
    app = createApp({})
    app.component("my-alert",alertComponent)
    app.mount("#app")

</script>
</html>